@charset "utf-8";

@import "reset";
@import "common";

@function vw($px) {
  @return $px/750px * 100 * 1vw;
}

.web {
  header {
    position: absolute;
    width: 100%;
    background: white;
    top: 0;
    left: 0;
    .psifl {
      width: vw(706px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(48px) 0 vw(20px);
      a {
        .button_box {
          width: vw(124px);
          height: vw(58px);
          color: black;
          font-size: vw(26px);
          text-align: center;
          line-height: vw(58px);
          border-radius: vw(29px);
          box-sizing: border-box;
          border: vw(1px) solid $index_color;
        }
      }
      .search_box {
        font-size: vw(26px);
        font-weight: bold;
      }
      .city_box {
        margin-top: vw(-12px);
        i {
          color: $index_color;
          font-size: vw(60px);
        }
      }
    }
  }
  section {
    width: 100%;
    position: absolute;
    top: vw(124px);
    bottom: vw(126px);
    overflow-y: auto;
    .kv {
      width: vw(706px);
      height: vw(206px);
      overflow: hidden;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
    .price_sell {
      width: vw(664px);
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      padding: vw(34px) 0 vw(26px);
      p {
        font-size: vw(72px);
        color: $index_color;
        i {
          font-size: vw(72px);
        }
      }
      button {
        width: vw(112px);
        height: vw(60px);
        font-size: vw(30px);
        color: white;
        background: $index_color;
        border-radius: vw(30px);
        border: none;
        align-self: center;
      }
    }
    .subtitle {
      width: vw(664px);
      height: vw(62px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .subtitle_left {
        display: flex;
        i {
          font-size: vw(40px);
          color: $index_color;
        }
        span {
          font-size: vw(30px);
          align-self: center;
          margin-left: vw(10px);
        }
        .hp {
          color: $index_color;
        }
      }
      .subtitle_right {
        a {
          span {
            font-size: vw(26px);
            color: #8e8e8e;
          }
        }
      }
    }
    .column {
      width: vw(664px);
      height: vw(68px);
      margin: vw(36px) auto 0;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: $index_color;
      padding: 0 vw(10px);
      box-sizing: border-box;
      span {
        font-size: vw(30px);
      }
      i {
        font-size: vw(46px);
      }
    }
    .details {
      width: vw(664px);
      margin: vw(15px) auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0;
      .details_tu {
        width: vw(176px);
        height: vw(176px);
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .price {
        width: vw(340px);
        height: vw(176px);
        .price_name {
          margin: vw(0px) 0 vw(10px);
          p {
            font-size: vw(30px);
          }
        }
        .price_meal {
          span {
            i {
              color: $index_color;
            }
          }
          .pf {
            color: #929292;

            font-size: vw(22px);
          }
        }
        .juli{
            font-size: vw(24px);
            color: #929292;
            margin: vw(10px) 0 vw(20px);
          }
          a{
              font-size: vw(22px);
              color: $index_color;
          }
      }
      button{
          width: vw(112px);
          height: vw(58px);
          font-size: vw(30px);
          color: white;
          border-radius: vw(29px);
          border: none;
          background: $index_color;
      }
    }
  }
}
